﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Calendar Picker IndustrialGrid Sample Using DB</title>
    <style type="text/css">
        body{background:#2C2C2C;margin:0px;top:0px;left:0px;font-family:Calibri,Microsoft Sans-Serif Serif,Tahoma;font-style:normal;font-weight:normal;font-size:12px;color:#171717;}
        .template{background:#E8E8E8;min-width:900px;width:90%;min-height:450px;height:auto;border:1px dotted #A4A2A2;margin-top:2%;padding-bottom:25px;margin-left:5%;}
        .template .titleTemp{color:#E04E06;font-size:16px;font-weight:bold;text-align:left;margin-top:2.5%;min-width:550px;width:95%;margin-left:2.5%;}
        .template .sample{background:#FFFFFF;min-width:850px;width:95%;min-height:575px;border:1px dotted #A4A2A2;padding-bottom:25px;margin-left:2.5%;}
        .template .content{background:#FFFFFF;min-width:550px;width:95%;margin-top:2.5%;min-height:50px;border:1px dotted #A4A2A2;padding-bottom:25px;margin-left:2.5%;}        
    </style>       
    <link href="../Styles/IndustrialDashboard.css" rel="stylesheet" type="text/css" />
    <link href="../Widgets/IndustrialGrid/Styles/IndustrialGrid.css" rel="stylesheet"type="text/css" />
    <link href="../Widgets/CalendarPicker/Styles/CalendarPicker.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/IndustrialDashboard.js" type="text/javascript"></script>
    <script src="../Addons/DestinationPDF/Scripts/DestinationPDF.js" type="text/javascript"></script>
    <script src="../Widgets/CalendarPicker/Scripts/CalendarPicker.js" type="text/javascript"></script>
    <script src="../Widgets/IndustrialGrid/Scripts/IndustrialGrid.js" type="text/javascript"></script>

    <style type="text/css">
        body{background:#909090; top:0px; left:0px; margin:0px;}
        div.style {width:350px;height:22px;margin-left:55%;margin-top:4px;font-family:Calibri,Microsoft Sans Serif;font-size:12px;position:relative;}
        .style p {color:#303030;width:95px;float:left;margin-top:4px;}
        .style select{float:left;margin-left:5px;width:120px;font-size:12px;font-family:Calibri,Microsoft Sand Serif;}
        div.pdf{width:100px;height:22px;float:left;font-family:Calibri,Microsoft Sans Serif;font-size:12px}
        div input{margin-left:5px;width:120px;height:22px; font-size:12px;font-family:Calibri,Microsoft Sand Serif;}
        .menuContainer{margin-top:25px;height:auto; width:90%; padding:10px;}      
    </style>   
</head>
<body style="">     
     <script language="javascript" type="text/javascript">
         var ig;
         var cp;
         var pdfb

         attachDomReadyEventHandler(function () {
             //Create CalendarPicker,for filtering IG Widget.
             var options = { 'Events': { 'onChange': refreshIG} };
             cp = new CalendarPicker(document.getElementById('pCalendarPicker'), options);
             //Set Initial Options, using "CallProcedure" method, also set the procedure.
             options = { 'URL': '../DALService.svc/CallProcedure', 'DatabaseParameters': { 'Procedure': 'dbo.getBatchDataIGCalendar'} };
             //Create an Instance of IndustrialGrid
             ig = new IndustrialGrid(document.getElementById('pIG'), options);
             //Set Specific Date
             var dd = new Date(2010, 3, 2);
             cp.SetValue(dd);
             refreshIG();

             //Attach click evetn to the export to pdf button
             pdfb = document.getElementById('pdfButton');
             addEventHandler(pdfb, 'onclick', function () { exportToPDF(document.getElementById('pIG')); });
         });

        function refreshIG() {
             ig.RefreshData(cp.GetResults({DBEngine:'SQLServer'}));
         };

         //Export html objects to pdf.
         function exportToPDF(obj) {
             try {
                 //Instance the Destination PDf Class, with the URL what procces the data and build the pdf file.
                 var destinationPdf = new DestinationPDF({ 'URL': '../DALService.svc/ExportTo' });

                 //Instance the PDf Widget Class, with the type of the widget to export to pdf.
                 var IGPDFWidget = new PdfWidget();
                 //Set the contetn of the widget to export depending its type.
                 IGPDFWidget.SetContent({ 'HTMLString': getHtmlString(obj.innerHTML)
                                        , 'URL': window.location.href
                                        , 'Width':500
                                        });
                 destinationPdf.AddPdfWidget(IGPDFWidget);

                 destinationPdf.SendData();
             }
             catch (Error) { }
         }

        function changeStyle(el) {
            try {
                var index = el.selectedIndex;
                var styleObject = getElementByHREFName('Styles/IndustrialGrid', document);
                var l = window.location;
                if (styleObject) {
                    styleObject.href = l.protocol + '//' + l.host + "/IndustrialDashboard/Widgets/IndustrialGrid/Styles/" + el[index].value;
                }
            } catch (Error) { }
        }   
    </script>       
        <div class="template">
            <div class="titleTemp">Sample</div>
            <div class="sample">
                <div style="position:relative;width:100%;margin-top:10px;z-index:99999;">
                    <div style="width:250px;margin-left:5%;float:left">
                        <div id="pCalendarPicker"></div>               
                    </div>
                    <div style="width:350px;float:left">
                        <div class="style">
                            <p>Change Style:</p> 
                            <select onchange="changeStyle(this);">
                                <option value="IndustrialGrid.css">Standard</option>
                                <option value="IndustrialGridOrange.css">Orange</option>
                                <option value="IndustrialGridGreen.css">Green</option>
                            </select>
                            <!--<input type="button" id="pdfButton" class="pdf" value="Export to PDF"/>-->
                        </div>
                    </div>    
                </div> 
                <div id="pIG" style="position:relative;left:0px;margin:0px;margin-left:1%;top:45px;width:96%;"></div>                                
            </div>
            <div class="content" style='text-align:left;padding:20px;width:92%;'>
                    <p> In this example, the javascript code needed to invoke the stored procedure <i>dbo.getBatchDataIGCalendar</i> is:  </p>
                    <pre style='background-color:#E0E0F0;width:98%;'>                    
                        attachDomReadyEventHandler(function() {                            
                            //Create CalendarPicker,for filtering IG Widget.
                            //Set Initial Options, for CalendarPicker.
                             var options = { 'Events': { 'onChange': refreshIG} };
                             cp = new CalendarPicker(document.getElementById('pCalendarPicker'), options);
                             //Set Initial Options, using "CallProcedure" method, also set the procedure.
                             options = { 'URL': '../DALService.svc/CallProcedure', 'DatabaseParameters': { 'Procedure':  <span style='color:red '>'dbo.getBatchDataIGCalendar'</span>} };
                             //Create an Instance of IndustrialGrid
                             ig = new IndustrialGrid(document.getElementById('pIG'), options);                             
                             //Set Specific Date
                             cp.SetValue(new Date(2010, 3, 2));
                             //Refresh Widget
                             refreshIG();
                        });

                        
                    </pre>
                </div>
        </div>
</body>
</html>

